<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.js"></script>
	</head>
	<body>
		<div id="main" style="width: 100%;height: 500px;"></div>
		<script type="text/javascript">
			//[{"email":"admin@163.com","model":"wechat","time":"2022-11-9"},{"email":"admin@163.com","model":"phone","time":"2022-11-9"},{"email":"admin@163.com","model":"qq","time":"2022-11-9"},{"email":"admin@163.com","model":"wechat","time":"2022-11-9"},{"email":"admin@163.com","model":"phone","time":"2022-11-9"}]
			let logStr = localStorage.getItem("log");
			let logObj = JSON.parse(logStr);
			let data = [{
				value: 0,
				name: 'webchat'
			}, {
				value: 0,
				name: 'phone'
			}, {
				value: 0,
				name: 'qq'
			}]
			logObj.forEach(function(val) {
				if (val.model == 'wechat') {
					data[0].value += 1;
				} else if (val.model == 'phone') {
					data[1].value += 1;
				} else if (val.model == 'qq') {
					data[2].value += 1;
				}
			})

			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var option = {
				tooltip: {
					trigger: 'item'
				},
				legend: {
					top: '5%',
					left: 'center'
				},
				series: [{
					name: '登录方式',
					type: 'pie',
					radius: ['40%', '70%'],
					avoidLabelOverlap: false,
					itemStyle: {
						borderRadius: 10,
						borderColor: '#fff',
						borderWidth: 2
					},
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '40',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: data
				}]
			};
			myChart.setOption(option);
		</script>
	</body>
</html>
